<template>
  <div class="outBox">
    <headerBox :countyTotal="countyTotal"  ref="headerBox"></headerBox>
    <div class="news" :style="{background: bgColor}">
      <div class="news-box">
        <div class="tips">当前位置：<router-link to="/map">首页</router-link> > <router-link to="/news">新闻列表</router-link>  <span v-if="typeName">>  {{typeName}}</span></div>
        <div class="news-items">
          <div class="empety-box" v-if="newsList.length == 0">
            <div class="empety-tips">暂无数据</div>
          </div>
          <div class="news-item"  v-for="(item,index) in newsList">
            <router-link v-if="queryParams.newsType" :to="{path:'/news/details',query:{newsId:item.newsId}}"  >
              <div class="news-title" >{{ item.newsTitle }}</div>
              <div class="news-tips">
                <span class="news-create-time">{{ item.createTime }}</span>
              </div>
            </router-link>
            <router-link  v-else :to="{path:'/news/details',query:{bannerId:item.id}}">
              <div class="news-title" >{{ item.bannerTitle }}</div>
              <div class="news-tips">
                <span class="news-create-time">{{ item.createTime }}</span>
              </div>
            </router-link>
            <div class="line"></div>
          </div>
        </div>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <div class="funBtns">
      <img class="back" src="../../../assets/images/back.png" @click="back">
      <img class="Home" src="../../../assets/images/home.png" @click="backHome">
    </div>
    <footerBox/>
  </div>
</template>

<script>
import { listNewsQuery } from '../../../api/system/news'
import { getDicts } from '../../../api/system/dict/data'
import footerBox from '@/components/footer'
import { screenHeight } from '@/utils/utils'
const { bgColor } = require('../../../utils/globalCss')
import headerBox from '@/components/HomePart/header_top'
import { listBanner } from '../../../api/system/banner'
export default {
  name: 'index',
  components:{
    footerBox,headerBox
  },
  data() {
    return {
      //背景颜色
      bgColor,
      // 新闻列表
      newsList: [],
      //总页数
      total: 0,
      currentTime:null,
      // 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        newsType: null,
        bannerType:null
      },
      countyTotal:0,
      typeName: null,

    }
  },
  created() {
    this.queryParams.newsType = this.$route.query.newsType
    this.queryParams.bannerType = this.$route.query.bannerType
    this.getList()
    this.getNewsTypeName()
  },
  mounted() {
    setInterval(() => {
      this.setTime()
    }, 1000)
  },
  methods: {
    goAhead() {
      this.$router.forward();
    },
    back() {
      this.$router.push('/news?newsType=0')
    },
    setTime() {
      let dt = new Date()
      const month = dt.getMonth() + 1
      let time = dt.getFullYear() + '年' +
        month + '月' +
        dt.getDate() + '日-' +
        dt.getHours() + '时' +
        dt.getMinutes() + '分' +
        dt.getSeconds() + '秒'
      this.currentTime = time
    },
    backHome() {
      this.$router.push("/map")
    },
    getNewsTypeName(){
      getDicts("sys_map_news_type").then(response => {
        const array = response.data
        const name =  array.filter(item => item.dictSort==this.queryParams.newsType)
        this.typeName = name[0].dictLabel
      })
    },
    // 获取新闻列表
    getList() {
      if(this.queryParams.newsType){
        listNewsQuery(this.queryParams).then(res => {
          this.newsList = res.rows
          this.total = res.total
        })
      }else{
        listBanner(this.queryParams).then(res => {
          this.newsList = res.rows
          console.log(this.newsList,"newsList")
          this.total = res.total
        })
      }
    },

    hideBoxFn(){
      const headerHeight = document.querySelector('header').offsetHeight
      this.centerHeight = screenHeight() - headerHeight * 2
    },
  },
  watch: {
    '$route'(to, from) {
      console.log(to,"tototo")
    }
  }
}
</script>

<style scoped lang="scss">
.outBox{
  background: rgb(3, 13, 72);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.funBtns{
  position: absolute;
  bottom: 1rem;
  left: 40%;
  transform: translateX(-50%);
  display: flex;
  width: 110px;
  justify-content: space-between;
  z-index: 99999;
  .back {
    position: absolute;
    left: 50px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    opacity: .5;
    cursor: pointer;
  }

  .goAhead {
    position: absolute;
    left: 200px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    cursor: pointer;
    opacity: .5;
  }

  .Home {
    position: absolute;
    left: 130px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    opacity: .5;
    cursor: pointer;
  }
}

.empety-box{
  text-align: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bolder;
  font-size: 1rem;
}
.pagination-container {
  background: rgba(0, 0, 0, 0);
}

::v-deep .el-pagination__total {
  color: #fff;
}

::v-deep .el-pagination__jump {
  color: #fff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2CA6B5;
}

.news {
  width: 100%;
  margin-bottom: 3rem;
  .news-box {
    width: 1100px;
    margin: 0 auto ;

    .tips {
      line-height: 60px;
      color: #2CA6B5;
      font-size: .25rem;
    }

    .news-items {
      min-height: 60vh;
    }

    .news-item {
      border-bottom: 1px solid #164F6B;
      margin-bottom: .3rem;
      color: #fff;
      position: relative;

      &:hover {
        color: #2CA6B5;
        cursor: pointer;

        .line {
          width: 100%;
        }
      }

      .line {
        position: absolute;
        left: 50%;
        bottom: 0;
        height: 2px;
        width: 0px;
        transition: all .3s;
        background: #2CA6B5;
        transform: translateX(-50%);
      }

      .news-title {
        font-weight: 800;
        font-size: .46rem;
      }

      .news-create-time {
        font-size: .3rem;
        line-height: .7rem;
      }
    }
  }
}
</style>
